<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta charset="utf-8" />
	<title></title>
	<link href="../css/bootstrap.min.css" rel="stylesheet">
	<link href="../css/bootstrap-select.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../css/bootstrap-treeview.min.css">
	<link href="../css/bootstrap-table.css" rel="stylesheet">
	<link href="../css/bootstrap-table-fixed-columns.css" rel="stylesheet">
	<link href="../css/font-awesome.min.css" rel="stylesheet">
	<link href="../css/JyyCommon.css" rel="stylesheet">
	<link href="../css/JyyTable.css" rel="stylesheet">
	<link href="../css/JyyTree.css" rel="stylesheet">
	<link href="../css/JyyMsgBox.css" rel="stylesheet">
	<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
	<script type="text/javascript" src="../js/jquery.form.min.js"></script> 
	<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-paginator.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-treeview.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-select.js"></script>
	<script type="text/javascript" src="../js/bootstrap-table.js"></script>
	<script type="text/javascript" src="../js/bootstrap-table-fixed-columns.js"></script>
	<script type="text/javascript" src="../js/jyy_modal.js"></script>
	<script type="text/javascript" src="../js/JyyCommon.js"></script>
	<script type="text/javascript" src="../js/JyyTable.js"></script>
	<script type="text/javascript" src="../js/JyyTree.js"></script>
	<script type="text/javascript" src="../js/JyyMsgBox.js"></script>
	<script type="text/javascript" src="../js/JyyLoading.js"></script>
	<script type="text/javascript" src="../js/echarts.js"></script>
	<script type="text/javascript" src="../../utils/CommonUtil.js"></script>
	<style>
	.heidenbt{
		display: none
	}
	.bootstrap-table {
	    margin-left: 30px!important;
	    width: calc(100% - 60px);
	}
</style>
	<script type="text/javascript">
		var tree = null;
		var projectId =  getQueryString("projectId")||'88888888888';
		$(function(){
			getDatePicker();
		});
		function selectData(){
			var startDate =  $('#startDate').val(); 
			var endDate =  $('#endDate').val();
			if(JyyCommon.isEmpty(startDate) || JyyCommon.isEmpty(endDate)){
				JyyMsgBox.alert({ title:"警告", message:"[日期]不可为空",type:"warning"}).on(function (e) {});
				return false;
			}
			$("#buttonP").hide();
			JyyModelLoading.start("sysWorkPosPicEchartDiv");
			$.when(getEcahtData(startDate,endDate, "sysWorkPosPicEchartData")).done(function(echatData){
				createEchat(echatData.respData, 0);
				$.when(getEcahtData(startDate,endDate, "sysWorkPosPicTableData")).done(function(tableData){
					createTable(tableData.respData, 0);
					JyyModelLoading.end("sysWorkPosPicEchartDiv");
					$("#buttonP").show();
				});
			});
			$("#buttonU").hide();
			JyyModelLoading.start("unitUtilRateEchartDiv");
			$.when(getEcahtData(startDate,endDate, "unitUtilRateEchartData")).done(function(echatData){
				createEchat(echatData.respData, 1);
				$.when(getEcahtData(startDate,endDate, "unitUtilRateTableData")).done(function(tableData){
					createTable(tableData.respData, 1);
					JyyModelLoading.end("unitUtilRateEchartDiv");
					$("#buttonU").show();
				});
			});
		}

		function createEchat(echartData, code) {
			var unitArr = ["常规火电", "启停火电", "热电","核电","抽蓄","燃油机组","储能","水电","风电","光伏","光热","区外"];
			var colorArr = ["#F01B2D", "#FF76FA", "#f076ee","#C7CEB2","#548DD4","#89A9E2","#FAC08F","#00B0F0","#92D050","#FFC000","#FFE957","#8B864E"];
			var option = {};
			var seriesData = echartData['seriesData'];
			var series = [];
			var id = "";
			var downloadname = "";
			var yAxisName = "";
			if(code == 0) {
				id = "sysWorkPosPicEchart";
				downloadname = "系统工作位置图";
				yAxisName = "MW";
				for(var j = 0;j < seriesData.length;j++) {
				    if(j==0){
				    	var base = -seriesData[j].series.reduce(function (min, val) {
					        return Math.floor(Math.min(min, val));
					    }, Infinity);
				    }
					if(seriesData[j].name == "负荷") {
						series.push({
							name: seriesData[j].name,
							type: 'line',
						    emphasis: {
						    	focus: 'none'
						    },
	                        itemStyle : {
	                            normal : {
	                            	color:'#000000',
	                                lineStyle:{
	                                    color:'#000000'  
	                                }
	                            }
	                        },
						    data: seriesData[j].series
						});
					}else if(unitArr.includes(seriesData[j].name)) {
						series.push({
							name: seriesData[j].name,
							type: 'line',
							stack: '总量',
					      	areaStyle: {},
						    emphasis: {
						    	focus: 'none'
						    },
	                        itemStyle : {
	                            normal : {
	                            	color: colorArr[unitArr.indexOf(seriesData[j].name)],
	                                lineStyle:{
	                                    color:colorArr[unitArr.indexOf(seriesData[j].name)]
	                                }
	                            }
	                        },
						    data: seriesData[j].series
						});
					} else {
						series.push({
							name: seriesData[j].name,
							type: 'line',
							stack: '总量',
					      	areaStyle: {},
						    emphasis: {
						    	focus: 'none'
						    },
						    data: seriesData[j].series
						});
					}
				}
			} else if(code == 1) {
				id = "unitUtilRateEchart";
				downloadname = "机组出力率分析";
				yAxisName = "%";
				for(var j = 0;j < seriesData.length;j++) {
					if(unitArr.includes(seriesData[j].name)) {
						series.push({
							name: seriesData[j].name,
							type: 'line',
						    emphasis: {
						    	focus: 'none'
						    },
	                        itemStyle : {
	                            normal : {
	                            	color: colorArr[unitArr.indexOf(seriesData[j].name)],
	                                lineStyle:{
	                                    color:colorArr[unitArr.indexOf(seriesData[j].name)]
	                                }
	                            }
	                        },
						    data: seriesData[j].series
						});
					} else {
						series.push({
							name: seriesData[j].name,
							type: 'line',
						    emphasis: {
						    	focus: 'none'
						    },
						    data: seriesData[j].series
						});
					}
				}
			}
			
			option = {
			  	tooltip: {
			    	trigger: 'axis',
			    	axisPointer: {
			      		type: 'cross',
			      		label: {
			        		backgroundColor: '#6a7985'
			      		}
			    	},
			    	position: function (pos, params, dom, rect, size) {
			    	      // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
			    	      var obj = {top: 60};
			    	      obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 325;
			    	      return obj;
			    	  }
			  	},
			  	legend: { },
				toolbox: {
					show: true,
					right: 30,
				    itemSize: 20,
					itemGap: 12,
			        feature: {
			        	myTool: {
			        		show: true,
			        		title: "导出为Excel",
			        		icon: 'image://../images/excel.png',
			        		onclick: (o) => {
								var option = o.option;
								var dataSource = [];
								var dataType = "\uFEFF"; //解决乱码问题
								dataType += option.xAxis[0].name+",";  //添加表格的头
								if(option.series.length > 0) {
									for(var i = 0;i < option.series.length;i++) {
										dataType += option.series[i].name+","
									}
									dataType = dataType.substr(0, dataType.length-1)
								}
								dataType += '\n'; // 以上是导出的Excel文件头部

								for(var i = 0;i < option.xAxis[0].data.length;i++) {
									var arr = [];
									for(var j = 0;j < option.series.length+1;j++) {
										if(j == 0) {
											arr.push(" "+option.xAxis[0].data[i]);
										} else {
											arr.push(option.series[j-1].data[i]);
										}
									}
									dataSource.push(arr);
								}
								// 从dataSource中取出数据存入数据源（dataType）
								dataSource.map(item => dataType += `${item.join(',')}\n`); 
								// 使用Blob，获得二进制实例
								const csvData = new Blob([dataType], {
								    type: 'text/csv'
								});
								// 创建a标签
								const _a = document.createElement('a');
								_a.href = URL.createObjectURL(csvData);
								_a.target = '_blank';
								_a.download = downloadname+JyyCommon.getNowDateString()+`.csv`;
								document.body.appendChild(_a);
								_a.click();
								document.body.removeChild(_a);
		                   	},
			        	},
			        	saveAsImage: {name:downloadname+JyyCommon.getNowDateString(),icon:"image://../images/downpic.png"}
			        }
			    },
			  	grid: {
			    	left: '3%',
			    	right: '4%',
			    	bottom: '15%',
			    	containLabel: true
			  	},
			  	xAxis: [{
			    	type: 'category',
			      	boundaryGap: false,
			      	data: echartData['xAxisData']
			    }],
			  	yAxis: [{
			      	type: 'value',
			      	name: yAxisName
			    }],
			    dataZoom: [{
			        type: "inside",
			    	start: 0,
			    	end: 100
			    },{
			    	start: 0,
			    	end: 100
			    }],
			  	series: series
			};
			var chartDom = document.getElementById(id);
			var myChart = echarts.init(chartDom);
			myChart.clear();
			myChart.setOption(option,true);
			window.addEventListener("resize", () => {
				if(myChart){
					myChart.resize()
				}
			})
		}

		// 创建表格
		function createTable(tableData, code) {
			var id = "";
			if(code == 0) {
				id = "sysWorkPosPicTable";
			} else if(code == 1) {
				id = "unitUtilRateTable";
			}
			var table = {
		    	cache: false,
		    	fixedColumns:true,
		        fixedNumber:2,
		        theadClasses: "bg-primary",
		        pagination: true, 
		        pageSize: 20,
		        pageList: [20, 30, 50, 100],
		    	columns: [{
		    		field: "begintime",
		    		title: "日期",
		    		width: "140"
		    	},{
		    		field: "typename",
		    		title: "类型",
		    		width: "140"
		    	},{
		    		field: "value1",
		    		title: "时刻1",
		    		width: "120"
		    	},{
		    		field: "value2",
		    		title: "时刻2",
		    		width: "120"
		    	},{
		    		field: "value3",
		    		title: "时刻3",
		    		width: "120"
		    	},{
		    		field: "value4",
		    		title: "时刻4",
		    		width: "120"
		    	},{
		    		field: "value5",
		    		title: "时刻5",
		    		width: "120"
		    	},{
		    		field: "value6",
		    		title: "时刻6",
		    		width: "120"
		    	},{
		    		field: "value7",
		    		title: "时刻7",
		    		width: "120"
		    	},{
		    		field: "value8",
		    		title: "时刻8",
		    		width: "120"
		    	},{
		    		field: "value9",
		    		title: "时刻9",
		    		width: "120"
		    	},{
		    		field: "value10",
		    		title: "时刻10",
		    		width: "120"
		    	},{
		    		field: "value11",
		    		title: "时刻11",
		    		width: "120"
		    	},{
		    		field: "value12",
		    		title: "时刻12",
		    		width: "120"
		    	},{
		    		field: "value13",
		    		title: "时刻13",
		    		width: "120"
		    	},{
		    		field: "value14",
		    		title: "时刻14",
		    		width: "120"
		    	},{
		    		field: "value15",
		    		title: "时刻15",
		    		width: "120"
		    	},{
		    		field: "value16",
		    		title: "时刻16",
		    		width: "120"
		    	},{
		    		field: "value17",
		    		title: "时刻17",
		    		width: "120"
		    	},{
		    		field: "value18",
		    		title: "时刻18",
		    		width: "120"
		    	},{
		    		field: "value19",
		    		title: "时刻19",
		    		width: "120"
		    	},{
		    		field: "value20",
		    		title: "时刻20",
		    		width: "120"
		    	},{
		    		field: "value21",
		    		title: "时刻21",
		    		width: "120"
		    	},{
		    		field: "value22",
		    		title: "时刻22",
		    		width: "120"
		    	},{
		    		field: "value23",
		    		title: "时刻23",
		    		width: "120"
		    	},{
		    		field: "value24",
		    		title: "时刻24",
		    		width: "120"
		    	}],
		    	data: tableData.dataList,
		    };
			$('#'+id).bootstrapTable('destroy').bootstrapTable(table);
			var div = document.getElementById(id).parentNode;
			if (div.scrollWidth <= div.clientWidth) {
				div.parentNode.removeChild(div.parentNode.getElementsByClassName("fixed-columns")[0]);
			}
		}
		//查询
		function select(){
			selectData();
		}

		function getQueryString (name){
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			return r ? unescape(r[2]) : null;
		}

		function getDatePicker(){
			$.ajax({
				url: "Sample/selectSysWorkPosPicDate",
				type:'POST',
				cache:false,
				dataType: "json",
				data:JSON.stringify({ projectId : projectId }),
				contentType:"application/json",
	            success:function(data){
	            	if(!data.respData.readonly){
		    			$("#startDate").datetimepicker({
		    				format : 'yyyy-mm-dd', // 展现格式
		    				autoclose : true, // 选择日期后关闭
		    				language : 'zh-CN', //显示语言为中文
		    				minView : "2",
		    				startDate : new Date(data.respData.startDate),
		    				endDate : new Date(data.respData.endDate)
		    			});
		    			$("#endDate").datetimepicker({
		    				format : 'yyyy-mm-dd', // 展现格式
		    				autoclose : true, // 选择日期后关闭
		    				language : 'zh-CN', //显示语言为中文
		    				minView : "2",
		    				startDate : new Date(data.respData.startDate),
		    				endDate : new Date(data.respData.endDate)
		    			});
		    			$('#startDate').on('changeDate', function(ev){
		    			    $('#endDate').datetimepicker('setStartDate', ev.date);
		    			    var d = $('#endDate').val();
		    			    if (d) {
		    			        var date = new Date(d.replace(/-/g, '/'));
		    			        if(date != 'Invalid Date' && date < ev.date){
		    			            $('#endDate').datetimepicker('setDate', ev.date)
		    			        }
		    			    }
		    			});
		    			$("#startDate").datetimepicker("setDate", new Date(data.respData.startDate));
		    			$("#endDate").datetimepicker("setDate", new Date(data.respData.startDate));
		    			selectData();
	            	} else { // 禁用日期控件
		    			$("#startDate").datetimepicker({
		    				format : 'yyyy-mm-dd', // 展现格式
		    				autoclose : true, // 选择日期后关闭
		    				language : 'zh-CN', //显示语言为中文
		    				minView : "2",
		    				startDate : new Date(),
		    				endDate : new Date()-1000*60*60*24
		    			});
		    			$("#endDate").datetimepicker({
		    				format : 'yyyy-mm-dd', // 展现格式
		    				autoclose : true, // 选择日期后关闭
		    				language : 'zh-CN', //显示语言为中文
		    				minView : "2",
		    				startDate : new Date(),
		    				endDate : new Date()-1000*60*60*24
		    			});
						JyyMsgBox.alert({ title:"警告", message:"暂无相关数据",type:"warning"}).on(function (e) {});
	            	}
	            }
			});
		}

		function getEcahtData(startDate, endDate, method){
			var res = $.ajax({
				url: "Sample/"+method,
				type:'POST',
				cache:false,
				dataType: "json",
				data:JSON.stringify({ projectId : projectId, startDate : startDate,endDate : endDate }),
				contentType:"application/json",
	            success:function(data){
					return data;
	            }
			});
			return res;
		}
		
		function download(code) {
			let fileName = ''
            if(code == 120503){
				fileName = "系统工作位置图表格";
			}else if (code == 120504){
				fileName = "机组出力率分析表格";
			}
			var startDate =  $('#startDate').val(); 
			var endDate =  $('#endDate').val();
			const url = localStorage.getItem('baseURL')
			var form = $(`<form id="download" action="${url}pageExcel/downloadExcel/`+ code +'" style="display:none" method="post">');
			var input = $('<input type="hidden" name="projectid">');
			input.attr("value", projectId);
			form.append(input);
			var input1 = $('<input type="hidden" name="startDate">');
			input1.attr("value", startDate.replace(/-/g, ""));
			form.append(input1);
			var input2 = $('<input type="hidden" name="endDate">');
			input2.attr("value", endDate.replace(/-/g, ""));
			form.append(input2);
			$("body").append(form);
			formSubmit(document.querySelector('#download'), fileName);
			form.submit();
			form.remove();
		}

		function invoke(url, args, callback){
			var r, op = {
					url: '../g/service/Sample/' + url,
					type:'POST',
					cache:false,
					async:true,
					dataType:'json',
					data:args ? JSON.stringify(args) : null,
					contentType:"application/json"
				};
			if(typeof callback == 'function'){
				op.success = function(data){
					if(data.error)return alert(data.error);
					callback(data);
				}
			} else {
				op.async = false;
				op.success = function(data){
					r = data
				};
			}
			$.ajax(op);
			if(r)if(r.error){
				alert(r.error);
				return null;
			}
			return r;
		};
	</script>
<style type="text/css">
	body, html{
		width: 100%;
		height: 100%;
	}
	.selBtn {
		float:left;
		margin-left:20px;
		height:30px;
		width:70px;
		background-color:#1890FF;
		border-radius:5px;
		border: 0px;
		color:white;
	}
	.selBtn:hover {
		background-color: #00BFFF;
	}
	.shadow {
		box-shadow: 0 0.05rem 1rem rgba(0,0,0,0.15)!important;
		border-radius: 0.25rem!important;
		margin-left: 20px;
		margin-bottom: 20px;
	}
	.bootstrap-select:not(.input-group-btn), .bootstrap-select[class*="col-"] {
		float: left;
	}
</style>
</head>
<body>
<div style="overflow-y: auto;width: 100%;height: 100%;">
	<div style="height: 50px;width: calc(100% - 20px);">
		<div class="col-md-12" style="padding-left: 5px;padding-right: 5px;margin-top: 10px;margin-left: 20px;">
			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 40px;font-weight: normal;">日期</label>
            <input id="startDate" class="form-control" placeholder="请选择日期" readonly style="float: left;margin-top: -3px;padding: 5px;width: 184px;font-weight: normal;">
			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;margin-left: 20px;padding: 0px;width: 30px;font-weight: normal;">~</label>
            <input id="endDate" class="form-control" placeholder="请选择日期" readonly style="float: left;margin-top: -3px;padding: 5px;width: 184px;font-weight: normal;">

			<button class="selBtn" onclick=select()>查询</button>
		</div>
	</div>
	<div id="sysWorkPosPicEchartDiv" class="shadow" style="width: calc(100% - 40px);min-height: 450px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">系统工作位置图</span>
		</p>
		<div id="sysWorkPosPicEchart" style="width: 100%;height: 400px;margin-top: 25px;"></div>
		<p id="buttonP"><button style="margin: 15px 30px 10px 0;float: right;" class="btn btn-info btn-sm" onclick=download(120503)><i class="glyphicon glyphicon-download"></i>导出Excel</button></p>
		<table id="sysWorkPosPicTable" ></table>
	</div>
	<div id="unitUtilRateEchartDiv" class="shadow" style="width: calc(100% - 40px);min-height: 450px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">机组出力率分析</span>
		</p>
		<div id="unitUtilRateEchart" style="width: 100%;height: 400px;margin-top: 25px;"></div>
		<p id="buttonU"><button style="margin: 15px 30px 10px 0;float: right;" class="btn btn-info btn-sm" onclick=download(120504)><i class="glyphicon glyphicon-download"></i>导出Excel</button></p>
		<table id="unitUtilRateTable" ></table>
	</div>
</div>
</body>
</html>